<template>
  <div class="like">
    <div class="like-title">
      <img src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt="猜您喜欢"> 猜您喜欢
    </div>
    <ul class="like-list">
      <li class="like-item" v-for="like of likeList" :key="like.id">
        <div class="like-tag" v-if="like.tag">
          <span v-if="like.tag === '随买随用'" :class="{tag1:true}">
            {{ like.tag }}
          </span>
          <span v-else-if="like.tag === '可订明日'" :class="{tag2:true}">
            {{ like.tag }}
          </span>
        </div>
        <img class="like-img" :src="like.imgUrl" :alt="like.title">
        <div class="like-content">
          <p class="title">{{ like.title }}</p>
          <p class="rating">
            <img v-for="item of [1,2,3,4,5]" :key="item" src="@/assets/img/star.png" alt="star">
            <span class="comment">{{ like.comment }}条评论</span>
          </p>
          <p class="price"><span>￥{{ like.price }}</span>起</p>
          <p class="area">{{ like.area }}</p>
          <div class="mark" v-if="like.mark">{{ like.mark }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script type="text/ecmascript-6">
    export default {
      props:['likeList'],
      data(){
        return{

        }
      }
    }
</script>
<style lang="stylus" rel="text/stylus" scoped>
  @import "~css/common.styl"
  .like
    background-color: #fff
    margin-top:.25rem
    font-size: .24rem
    .like-title
      font-size: .32rem
      padding: .2rem
      img
        width: .3rem
        height: .3rem
    .like-list
      padding-left:.2rem
      .like-item
        padding:.2rem 0
        position: relative
        border-bottom:1px solid #eee
        overflow: hidden
        .tag1
          background-color: #ffa51a
          $tag()
        .tag2
          background-color: #0bd5ef
          $tag()
        .like-img
          width:2rem
          height: 2rem
          float: left
          margin-right:.2rem
        .like-content
          float: left
          .title
            font-size: .32rem
            margin:.26rem 0 .14rem 0
          .rating>img
            width:.2rem
            height: .2rem
          .price
            margin-top:.22rem
            span
              font-size: .4rem
              color:#ff8300
          .area
            position: absolute
            top: 1.5rem
            right: 0.3rem
          .mark
            color: #ff5555
            margin-top:.6rem
</style>
